<template>
  <div class="home">
    <Post />
    <Nav />
    <List />
    <!-- 购物车图标 -->
    <router-link class="cart" to="/cart">
      <img src="../../assets/images/cart.png" alt="">
      <span class="num"> {{ cartList.reduce( (total,item)=> { return total + item.count } ,0) }} </span>
    </router-link>
  </div>
</template>

<script>

import Post from './Post'
import Nav from './Nav'
import List from './List'

/* 从vuex导入辅助函数 */
import {mapState} from 'vuex'

export default {
  name: 'home',
  data: function(){
    return {
      
    }
  },
  /* mapState辅助函数,负责从store中注入state数据,必须写在computed中 */
  /* 通过mapState辅助函数注入的数据 放在当前组件实例身上 */
  computed:{
    ...mapState(['cartList'])
  },
  components: {
    'Post':Post,
    'Nav':Nav,
    'List':List
  }
}
</script>

<style scoped>
  .cart{
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    right: 30px;
    bottom: 50px;
    background-color: lightskyblue;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    text-align: center;
  }
  .cart img{
    width: 50%;
  } 
  .cart .num{
    position: absolute;
    right: 0;
    top: 0;
    background-color: red;
    color: white;
    width: 14px;
    height: 14px;
    font-size: 10px;
    line-height: 14px;
    text-align: center;
    border-radius: 50%;
  }
</style>


